import React from 'react'

export default function Count(props) {
  const [count, setCount] = React.useState(0)
  const myRef = React.useRef()

  function handleAdd() {
    setCount(count + 1)
  }

  function showRef() {
    alert(myRef.current.value)
  }

  React.useEffect(() => {
    let timer = setInterval(() => {
      console.log(111);
      setCount(count => count + 1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <div>
      <h2>show count: {count}</h2>
      <button onClick={handleAdd}>+1</button>
      <input type="text" ref={myRef} />
      <button onClick={showRef}>展示表单数据</button>
    </div>
  )
}

/**
 * 这个函数的调用 1+n 次
 * 初始化的时候会调用一次 每次更新时都会进行render的
 * 但是这样岂不是说每次count都会初始化成0
 * 其实不然,react的内部是做了处理的 如果你的状态值未发生改变 他不会初始化你的状态的
 */